<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0,user-scalable=no">
    <link rel="stylesheet" href="./css/y4.css">
    <link rel="icon" type="image/png" sizes="16x16" href="./img/logo.png">
    <title>Document</title>
</head>
<body>
    <div class="boxy">

    </div>
    <div class="n-y4">
        <div class="wrap-y4" style="transition-duration: 0ms; transform: translate(0px, 0px) scale(1) translateZ(0px); transition-timing-function: cubic-bezier(0.165, 0.84, 0.44, 1);">
            <span data-id="18129" class="cur" style="color: rgb(255, 255, 255); pointer-events: auto;">特别招募 <i style="background-color: rgb(255, 255, 255);"></i>
            </span>
            <span data-id="24648" class="" style="color: rgb(204, 204, 204); pointer-events: auto;">出境推荐 <i style="background-color: rgb(255, 255, 255); display: none;"></i>
            </span>
            <span data-id="18130" class="" style="color: rgb(204, 204, 204); pointer-events: auto;">私家小团 <i style="background-color: rgb(255, 255, 255); display: none;"></i>
            </span>
            <span data-id="28106" class="" style="color: rgb(204, 204, 204); pointer-events: auto;">邮轮旅行 <i style="background-color: rgb(255, 255, 255); display: none;"></i>
            </span>
            <span data-id="18132" class="" style="color: rgb(204, 204, 204); pointer-events: auto;">旅行灵感 <i style="background-color: rgb(255, 255, 255); display: none;"></i>
            </span>
        </div>
        <div class="Nav__bg"></div>
    </div>
</body>
<script src="./js/reset.js"></script>
<script>
const boxy = document.querySelector('.boxy')

async function fetchData() {
  try {
    const mainResponse = await fetch('https://h5.youxiake.com/api/topic/web/h5/get/data?h5Id=10529&mark=https:%2F%2Fh5.youxiake.com%2Fhz%2F10529%3Fsource%3Dxcxejdh%26sdm%3D201.103.1.4')
    const mainData = await mainResponse.json()
    for (const element of mainData.data.infoBeanList) {
      if (element.flag === 0) {
        boxy.innerHTML += `
          <img class="picture1-y4" src="${element.info[0]}" alt="">
        `
      } else if (element.flag === 2) {
        boxy.innerHTML+=`
            <ul class="lists2-y4" id='${element.sort}'></ul>
        `
        ul = document.getElementById(`${element.sort}`)
        element.info.forEach(item=>{
            str=''
            item.liangdianTags.forEach(list => {
                str+=`<div class="two-y4">${list}</div>`
            });
            ul.innerHTML +=`
                <li>
                    <img src="${item.avatarScaleList[0].avatarUrl}" class="bg-y4">
                    <span class="dingwei-y4">${item.jihedi}</span>
                    <div class="bott-y4">
                        <p class="t-y4">${item.productName}</p>
                        <p class="bao-y4">${item.batch.startDate}可报名</p >
                        <div class="gentuan-y4">
                        <span>${item.classType}·${item.classTheme}·${item.days}</span>
                        </div>
                        <div class="tag-y4">
                            ${str}
                        </div>
                        <div class="bot2-y4">
                            <div class="txt6-y4">
                                <span>￥ </span>
                                <span class="txt7-y4"> ${item.price}</span>
                                <span class="txt11-y4">起</span>
                            </div>
                            <span class="txt1-y4">${item.sum}</span>
                        </div>
                    </div>
                </li>
            `
        })
      } else if (element.flag === 13) {
        const navResponse = await fetch(`https://h5.youxiake.com/api/topic/web/h5/nav/data?navId=${element.info[0].navId}&h5Id=10529`)
        const navData = await navResponse.json()
        boxy.innerHTML += `
          <div class="title-y4">
            <div class="content-y4">
              <span class="secondNav-y4">${element.info[0].nav}</span>
            </div>
          </div>
          <ul class="lists2-y4" id='${element.info[0].pid}'></ul>
        `
        let ul = document.getElementById(`${element.info[0].pid}`)
        for(const item of navData.data.infoBean.info){
            let str=''
            await item.liangdianTags.forEach(list => {
                str+=`<div class="two-y4">${list}</div>`
            });
            ul.innerHTML+=`
                <li>
                    <img src="${item.avatarScaleList[0].avatarUrl}" class="bg-y4">
                    <span class="dingwei-y4">${item.jihedi}</span>
                    <div class="bott-y4">
                        <p class="t-y4">${item.productName}</p>
                        <p class="bao-y4">${item.batch.startDate}可报名</p >
                        <div class="gentuan-y4">
                        <span>${item.classType}·${item.classTheme}·${item.days}</span>
                        </div>
                        <div class="tag-y4">
                            ${str}
                        </div>
                        <div class="bot2-y4">
                            <div class="txt6-y4">
                                <span>￥ </span>
                                <span class="txt7-y4"> ${item.price}</span>
                                <span class="txt11-y4">起</span>
                            </div>
                            <span class="txt1-y4">${item.sum}</span>
                        </div>
                    </div>
                </li>
            `
        }
      }
    }
  } catch (err) {
    console.log(err)
  }
}
fetchData()
</script>
</html>